<template>
	<view class="page">
		<view class="head-back">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="title">
				<text>我的订单</text>
			</view>
			<view class="more-icon">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view>
		</view>
		<!-- 订单tab -->
		<view class="order-tab">
		    <view class="tab" :class="{ active: status === 0 }" @click="onOrderTab(0)">
		        <text>全部</text>
		        <text class="line"></text>
		    </view>
		    <view class="tab" :class="{ active: status === 1 }" @click="onOrderTab(1)">
		        <text>待付款</text>
		        <text class="line"></text>

		    </view>
		    <view class="tab" :class="{ active: status === 2 }" @click="onOrderTab(2)">
		        <text>待发货</text>
		        <text class="line"></text>
		    </view>
		    <view class="tab" :class="{ active: status === 3 }" @click="onOrderTab(3)">
		        <text>待收货</text>
		        <text class="line"></text>
		    </view>
		    <view class="tab" :class="{ active: status === 4 }" @click="onOrderTab(4)">
		        <text>待评价</text>
		        <text class="line"></text>
		    </view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="list" v-for="(item,index) in list" @click="onOrderList" :key="index">
				<view class="title-status">
					<view class="title">
						<text>下单时间：{{item.create_time}}</text>
					</view>
					<view class="status">
						<text>{{getOrderStatusText(item.status)}}</text>
						<text class="iconfont icon-laji del"></text>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods">
						<view class="thumb">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="item">
							<view class="goods-name">
								<text class="two-omit">{{item.title}}</text>
							</view>
							<view class="goods-price">
								<text class="min">￥</text>
								<text class="max">{{item.amount}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="status-btn">
					<view class="btn">
						<text>取消订单</text>
					</view>
					<view class="btn action" @click.stop="onEvaluate">
						<text>评价</text>
					</view>
					<view class="btn action" v-if="status === 1" @click.stop="goToPay">去付款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import order from '../api/order';
	export default {
		data() {
			return {
				status: 0,
				list:[],
			};
		},
		onLoad(){
			this.OrderLists();
		},
		methods:{
			onOrderTab(status){
				this.status = status;
				this.list=[],
				this.OrderLists()
			},
			OrderLists() {
				order.OrderList({
					user_id:1,
					status:this.status
				}).then(res => {
					console.log(res)
					if (!res.data) {
						return
					}
					this.list = this.list.concat(res.data)
				})
			},
			getOrderStatusText(status) {
			                switch (status) {
			                    case 1:
			                        return '待付款';
			                    case 2:
			                        return '待发货';
			                    case 3:
			                        return '待收货';
			                    case 4:
			                        return '待评价';
			                }
			            },
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 订单列表点击
			 */
			onOrderList(){
				uni.navigateTo({
					url: '/pages/OrderDetails/OrderDetails',
				})
			},
		  /**
		   * 评价点击
		   */
		  onEvaluate(){
				uni.navigateTo({
				url: '/pages/MyEvaluatePush/MyEvaluatePush'
			})
		  },
      goToPay(){
        uni.navigateTo({
          url: '/pages/OrderDetails/OrderDetails'
        })
      },
		}
	}
</script>

<style scoped lang="scss">
	@import 'MyOrderList.scss';
</style>
